<template>
	<div class="m-audio-wrap" @click="play" :style="direction=='right'?layoutStyle:''">
		<div :style="direction=='right'?audioStyle:''">
			<div class="m-sector" :class="{ play: animate }"><div class="m-dot"></div></div>
		</div>
		<div class="m-time">{{ duration && showDuration ? duration + '"' : text }}</div>
	</div>
</template>
<script>
//import BenzAMRRecorder from 'benz-amr-recorder';
import { audioMixin } from './mixin';
export default {
	name: 'MAudio',
	mixins: [audioMixin],
	props: {
		src: {
			type: String,
			required: true
		},
		text: {
			type: String,
			default: '点击播放'
		},
		showDuration: {
			type: Boolean,
			default: true
		},
		direction: {
			type: String,
			default: 'left'
		}
	},
	data() {
		return {
			layoutStyle: {
				display: 'flex',
				'flex-direction': 'row-reverse'
			},
			audioStyle: {
				transform: 'scaleX(-1)'
			},
			audio: null,
			animate: false,
			timer: null,
			duration: 0,
			stopFlag: false
		};
	},
	beforeDestroy() {
		if (this.audio) {
			this.mStop();
		}
	},
	methods: {
		play() {
			if (!this.audio) {
				this.init();
			} else {
				if (this.audio.isPaused) {
					if (this.audio.isPaused()) {
						this.audio.resume();
					} else {
						this.audio.pause();
					}
				} else {
					if (this.audio.paused) {
						this.audio.play();
					} else {
						this.audio.pause();
					}
				}
			}
		},
		init() {
			this.audio = new Audio();
			this.audio.addEventListener('error', this.tryPlayAMR); // 播放出错，则尝试使用 AMR 播放
			this.audio.src = this.src;
			this.audio.addEventListener('canplay', () => {
				this.mInit(this.audio.duration);
			});
			this.audio.onplay = () => {
				this.mPlay();
			};
			this.audio.onpause = () => {
				this.mPause();
			};
			this.audio.onended = () => {
				this.mEnd();
			};
		},
		tryPlayAMR() {
			const isIE = /MSIE|Trident|Edge/.test(window.navigator.userAgent);
			if (isIE) {
				this.$message.warning('您的浏览器不支持该格式的语音消息播放，请尝试更换浏览器，建议使用：谷歌浏览器');
				return;
			}
			this.playAMR();
		},
		playAMR() {
			// this.audio = new BenzAMRRecorder();
			// this.audio
			// 	.initWithUrl(this.src.replace('http://', 'https://'))
			// 	.then(() => {
			// 		this.mInit(this.audio.getDuration());
			// 	})
			// 	.catch(() => {
			// 		this.audio = null;
			// 		this.$message.warning('您的浏览器不支持该格式的语音消息播放，请尝试更换浏览器，建议使用：谷歌浏览器');
			// 	});

			// this.audio.onPlay(() => {
			// 	this.mPlay();
			// });
			// this.audio.onResume(() => {
			// 	this.mPlay();
			// });
			// this.audio.onPause(() => {
			// 	this.mPause();
			// });
			// this.audio.onEnded(() => {
			// 	this.mEnd();
			// });
		}
	}
};
</script>
<style lang="scss" scoped>
.m-audio-wrap {
	height: 40px;
	width: 100px;
	border-radius: 20px;
	padding: 0 14px;
	border: 1px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
	.m-sector {
		height: 10px;
		width: 10px;
		border-top-right-radius: 9px;
		border-right: 2px solid #ddd;
		border-top: 2px solid #ddd;
		transform: rotate(45deg);
		position: relative;
		.m-dot {
			height: 4px;
			width: 4px;
			border-radius: 4px;
			background: #ddd;
			position: absolute;
			bottom: 0;
		}
	}
	.m-sector::after {
		content: '';
		height: 16px;
		width: 16px;
		border-top-right-radius: 14px;
		border-right: 2px solid #ddd;
		border-top: 2px solid #ddd;
		transform: rotate(0deg);
		position: absolute;
		right: -8px;
		top: -8px;
	}

	.m-time {
		color: #999;
		font-size: 12px;
	}
}

@keyframes play-dot {
	from {
		background: #ddd;
	}
	to {
		background: #5cadff;
	}
}
@keyframes play-sector {
	from {
		border-color: #ddd;
	}
	to {
		border-color: #5cadff;
	}
}
.m-sector.play {
	animation: play-sector 0.3s 0.1s ease-in-out;
}
.m-sector.play::after {
	animation: play-sector 0.3s 0.3s ease-in-out;
}
.m-sector.play .m-dot {
	animation: play-dot 0.3s ease-in-out;
}
</style>
